<template>
  <div class="app-container">
    <h2 style="text-align: center">发布软笔资源包</h2>

    <el-steps
      :active="1"
      process-status="wait"
      align-center
      style="margin-bottom: 40px"
    >
      <el-step title="添加软笔出版社" />
      <el-step title="添加软笔书" />
      <el-step title="添加软笔书目录" />
      <el-step title="添加软笔书单元" />
      <el-step title="添加章节" />
      <el-step title="添加七步" />
    </el-steps>

    <el-form
      :rules="dataRule"
      ref="editionForm"
      :model="edition"
      label-width="120px"
    >
      <el-form-item label="出版社名称" prop="editionName">
        <el-input v-model="edition.editionName" />
      </el-form-item>
      <el-form-item label="出版社封面" prop="editionCover">
        <el-upload
          class="avatar-uploader"
          :action="'http://121.41.167.195:8000/api/oss/upload'"
          ref="editionUpload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img
            v-if="edition.editionCover"
            :src="edition.editionCover"
            
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
    </el-form>

    <div>
      <el-button :disabled="saveBtnDisabled" type="primary" @click="next"
        >下一步</el-button
      >
    </div>
  </div>
</template>

<script>
import Vue from "vue";
export default {
  data() {
    return {
      saveBtnDisabled: false, // 保存按钮是否禁用
      edition: {
        // 出版社对象
        editionName: "",
        editionCover: "",
        id: null,
      },
      dataRule: {
        editionName: [
          { required: true, message: "出版社名称不能为空", trigger: "blur" },
        ],
        editionCover: [
          { required: true, message: "封面不能为空" },
        ],
      },
    };
  },
  
  activated() {
    var url = window.location.href
    if (this.$cookie.get("path") != null && url.indexOf("ruanbi/add") == -1) {
      // 路由跳转
      this.$router.push({
        path: `/ruanbi/${this.$cookie.get("path")}/${this.$cookie.get("id")}`,
      });
    }
    if (this.$route.params && this.$route.params.id) {
      this.edition.id = this.$route.params.id;
      // 回显数据
      this.getEditionById();
    }
  },

  methods: {
    getEditionById() {
      this.$http({
        url: this.$http.adornUrl(`/sf/cbbookedition/info/${this.edition.id}`),
        method: "get",
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.edition = data.edition;
        } else {
          this.edition = { editionName: "", editionCover: "", id: null };
        }
      });
    },
    //上传成功后的回调函数
    handleAvatarSuccess(response) {
      this.edition.editionCover = response.url;
    },
    beforeAvatarUpload() {},
    // 表单提交
    editionFormSubmit() {
      // 表单验证
      this.$refs["editionForm"].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/sf/cbbookedition/save`),
            method: "post",
            data: this.$http.adornData(this.edition, false),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "添加成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  // 路由跳转
                  this.$router.push({
                    path: "/ruanbi/ruanbiBookAdd/" + data.edition.id,
                  });
                  // 记录到哪一步了和id
                  this.$cookie.set("path", "ruanbiBookAdd");
                  this.$cookie.set("id", data.edition.id);
                  this.saveBtnDisabled = false;
                },
              });
            } else {
              this.$message.error(data.msg);
              this.saveBtnDisabled = false;
            }
          });
        }else{
          this.saveBtnDisabled = false;
        }
      });
    },
    updateEdtion() {
      // 表单验证
      this.$refs["editionForm"].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/sf/cbbookedition/update`),
            method: "post",
            data: this.$http.adornData(this.edition, false),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "修改成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  // 路由跳转
                  this.$router.push({
                    path: "/ruanbi/ruanbiBookAdd/" + data.edition.id,
                  });
                  // 记录到哪一步了和id
                  this.$cookie.set("path", "ruanbiBookAdd");
                  this.$cookie.set("id", data.edition.id);
                  this.saveBtnDisabled = false;
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }else{
          this.saveBtnDisabled = false;
        }
      });
    },
    next() {
      this.saveBtnDisabled = true;
      if (this.$route.params && this.$route.params.id) {
        // 修改
        this.updateEdtion();
      } else {
        // 添加
        this.editionFormSubmit();
      }
    },
  },
};
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
